import React, {CSSProperties} from "react";
import {Col as AntdCol, Image as AntdImage} from 'antd';
import {CaretLeftOutlined,CaretRightOutlined}from '@ant-design/icons';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import {
    renderItems,
    VJsonComponent,
    VJsonComponentBase,
} from "../factory";
import _ from 'lodash'
import {toJS} from "mobx";
import {apply} from "..";

export interface ImageVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    style?: CSSProperties
    className?:string

    /**
     * 内容元素
     */
}

export interface ImageState {
    dataSource:any[]
}

@VJsonComponent({
    view: 'image'
})
export default class Image extends VJsonComponentBase<ImageVJsonProp, ImageState> {
    static defaultProps: ImageVJsonProp = {
        visible: true,
    }
    
    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Image.defaultProps
        )

        this.state={
            dataSource:(props.vjson.dataSource==undefined) ? [] : props.vjson.dataSource
        }
    }

    private viewer!: Viewer;

    componentDidMount(){
        const viewer = new Viewer(
            // @ts-ignore
            document.getElementById(this.props.vjson.id+'-ul'),{
            //inline: false,
            viewed() {
                viewer.zoomTo(1);
            },
        });
        this.viewer = viewer;
    }

    setDatasource(data: any) {
        this.setState({
            dataSource:data
        })

        this.viewer.update()
    }

    prevFn(num:number){//换位到上一个
        let copyData=$.extend(true, [], this.state.dataSource);
        let newData=this.upGo(copyData,num);
        this.setState({
            dataSource:newData
        })
    }

    nextFn(num:number){//换位到下一个
        let copyData=$.extend(true, [], this.state.dataSource);
        let newData=this.downGo(copyData,num);
        this.setState({
            dataSource:newData
        })
    }

    upGo(fieldData:any,index:any){//向前移动一个
        if(index!=0){
            fieldData[index] = fieldData.splice(index-1, 1, fieldData[index])[0];
        }else{
            fieldData.push(fieldData.shift());
        }
        return fieldData
    }
    
    downGo(fieldData:any,index:any) {//向后移动一个
        if(index!=fieldData.length-1){
            fieldData[index] = fieldData.splice(index+1, 1, fieldData[index])[0];
        }else{
            fieldData.unshift( fieldData.splice(index,1)[0]);
        }
        return fieldData;
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }
        return (
            <ul className="ant-image-ul" id={this.props.vjson.id+'-ul'}>
                {
                    _.map(this.state.dataSource, (item: any,index:any) => {
                        return <li className="ant-image-li" key={this.props.vjson.id+index}> 
                            <img src={item.src} alt="" width={(this.props.vjson.width==undefined) ? 200 : this.props.vjson.width}  height={(this.props.vjson.height==undefined) ? 200:this.props.vjson.height}/>
                            <div className="ant-image-change">
                                {
                                    (index==0) ? null :<span className="ant-image-change-prev" onClick={this.prevFn.bind(this,index)}><CaretLeftOutlined /></span>
                                }
                                {
                                    (index==this.state.dataSource.length-1)? null : <span className="ant-image-change-next" onClick={this.nextFn.bind(this,index)}><CaretRightOutlined /></span>
                                }
                            </div>
                        </li>
                    })
                }
            </ul>
        )
    }
}
